<script>
import {getUser} from "../../utils/utils";

export default {
  name: "Recommend",
  data(){
    return{
      user:{},
      pageInfo:{},
      pageSize:24,
      likeList:[],
      followList:[],
      showFlag:0,
      showData:{},
      myComment:'',
      myComment1:'',
      showInput:0,
      searchKey:'',
    }
  },
  methods:{
    search(){
      this.paging(1)
    },
    sendComment(parentCommentId,flag,comment){
      if (flag){
        if (!this.myComment){
          this.$message.info('请输入评论')
          return
        }
        const fd=new FormData
        fd.append('blogId',this.showData.id)
        fd.append('userId',this.user.id)
        fd.append('content',this.myComment)
        fd.append('parentCommentId',parentCommentId)
        this.$axios.post('community/sendComment',fd).then(resp=>{
          if (resp.data.flag){
            this.showData.commentCount++
            this.showData.comments.unshift(
              {
                'blogId':this.showData.id,
                'userId':this.user.id,
                'content':this.myComment,
                'parentCommentId':parentCommentId,
                'createTime':new Date,
                'user':this.user,
                'id':resp.data.data.id,
                'childComments':[]
              }
            )
            this.myComment=''
            this.$message.success(resp.data.msg)
          }else {
            this.$message.error(resp.data.msg)
          }
        })
      }else {
        if(!this.myComment1){
          this.$message.info('请输入评论')
        }else{
          const fd=new FormData
          fd.append('blogId',this.showData.id)
          fd.append('userId',this.user.id)
          fd.append('content',this.myComment1)
          fd.append('parentCommentId',parentCommentId)
          this.$axios.post('community/sendComment',fd).then(resp=>{
            if (resp.data.flag){
              this.showData.commentCount++
              comment.childComments.unshift(
                {
                  'blogId':this.showData.id,
                  'userId':this.user.id,
                  'content':this.myComment1,
                  'parentCommentId':parentCommentId,
                  'createTime':new Date,
                  'user':this.user,
                  'id':resp.data.data.id
                }
              )
              // this.showData.comments.forEach(comment=>{
              //   if(comment===parentCommentId){
              //     comment.childComments.unshift(
              //       {
              //         'blogId':this.showData.id,
              //         'userId':this.user.id,
              //         'content':this.myComment,
              //         'parentCommentId':parentCommentId,
              //         'createTime':new Date,
              //         'user':this.user
              //       }
              //     )
              //   }
              // })
              // comment.childComments.unshift(
              //   {
              //     'blogId':this.showData.id,
              //     'userId':this.user.id,
              //     'content':this.myComment,
              //     'parentCommentId':parentCommentId,
              //     'createTime':new Date,
              //     'user':this.user
              //   }
              // )
              this.myComment1=''
              this.$message.success(resp.data.msg)
            }else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      }
    },
    followYou(blog){
      this.$axios.post('community/followYou?blogerId='+blog.creatBy+'&userId='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.getFollow()
          this.$message.success(resp.data.msg)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    dfollowYou(blog){
      this.$axios.post('community/dfollowYou?blogerId='+blog.creatBy+'&userId='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.getFollow()
          this.$message.success(resp.data.msg)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    addLike(blog){
      this.$axios.post('community/like?blogId='+blog.id+'&userId='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.getLike()
          blog.likeCount++
          this.$message.success(resp.data.msg)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    removeLike(blog){
      this.$axios.post('community/dlike?blogId='+blog.id+'&userId='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.getLike()
          blog.likeCount--
          this.$message.success(resp.data.msg)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    view(blog){
      this.showData=blog
      this.showFlag=1
    },
    back(){
      this.showFlag=0
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    paging(curPage){
      this.$axios.get('/community/tlist?curPage='+curPage+'&pageSize='+this.pageSize+'&searchKey='+this.searchKey).then(resp=>{
        this.pageInfo=resp.data
      })
    },
    getLike(){
      this.$axios.get('community/getLike?id='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.likeList=resp.data.data
        }else {
          this.$message.error('获取点赞id失败，请联系管理员')
        }
      })
    },
    getFollow(){
      this.$axios.get('community/getFollow?id='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.followList=resp.data.data
        }else {
          this.$message.error('获取关注失败，请联系管理员')
        }
      })
    },
    /**
     * @desc 监听回车键执行事件
     **/
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.search()
      }
    },
  },
  created() {
    this.user=getUser()
    this.getLike()
    this.getFollow()
    this.paging(1)
  },
  /**
   * @desc 绑定监听事件
   **/
  mounted() {
    window.addEventListener('keydown', this.keyDown)
  },

  /**
   * @desc 销毁事件
   **/
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false)
  },
}
</script>

<template>
<div>
  <div v-if="showFlag===0">
    <div>
      <el-input v-model="searchKey" placeholder="请输入搜索条件" style="width: 90%"></el-input><el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div class="mainuse">
      <el-card shadow="hover" style="width: 98%; height: auto" v-for="blog in pageInfo.list">
        <div slot="header" class="clearfix" style="display: flex; align-items: center;">
          <img :src="blog.user.headphoto" class="user-avatar" v-if="blog.user.headphoto!==null">
          <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="user-avatar" v-if="blog.user.headphoto===null">
          &nbsp;&nbsp;
          <span >{{blog.user.name}}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button style="float: right; padding: 3px 0" type="text" @click="followYou(blog)" v-if="!(followList.includes(blog.creatBy))&&blog.creatBy!==user.id">关注</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="dfollowYou(blog)" v-if="(followList.includes(blog.creatBy))&&blog.creatBy!==user.id">取消关注</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="view(blog)">查看</el-button>
        </div>
        <div>
          <p v-html="blog.title">{{blog.title}}</p>
          <img :src="blog.coverPath" style="width: 100%;height: auto">
        </div>
        <el-divider></el-divider>
        <div>
          <i class="el-icon-chat-dot-square">{{blog.commentCount}}</i>
          <i class="el-icon-star-off" v-if="!(likeList.includes(blog.id))" @click="addLike(blog)">{{blog.likeCount}}</i>
          <i class="el-icon-star-on" v-if="likeList.includes(blog.id)" @click="removeLike(blog)">{{blog.likeCount}}</i>
        </div>
      </el-card>
    </div>
    <div style="display: flex;  justify-content: center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page="pageInfo.pageNum"
        :page-sizes="[24,36,48,60]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>
  </div>
  <div v-if="showFlag===1">
    <el-button type="primary" @click="back">返回</el-button>
    <br>
    <h1 style="text-align: center" v-html="showData.title"></h1>
    <div>
      <div v-html="showData.blog"></div>
    </div>
    <div >
      <br><br>
      <div>
        <span style="font-size: large">评论&nbsp;</span><span style="font-size: small">{{showData.commentCount}}</span>
        <br>
        <el-input v-model="myComment" placeholder="发个友善的评论交流一下吧！" style="width: 90%"></el-input><el-button type="primary" @click="sendComment(0,true)">发送</el-button>
      </div>
      <div v-for="comment in showData.comments">
        <img :src="comment.user.headphoto" class="avatar" v-if="comment.user.headphoto!==null">
        <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="avatar" v-if="comment.user.headphoto===null">
        <!--<img class="avatar" :src="comment.user.headphoto" alt="头像">-->
        <span style="vertical-align: top;font-size: medium;color: rgba(251,114,153,0.8)">{{comment.user.name}}</span>
        <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="comment.user.id===showData.creatBy">帖主</el-tag></span>
        <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="comment.user.id===user.id">我</el-tag></span>
        <div style="margin-left: 40px">
          <span>{{comment.content}}</span>
          <el-button type="text" @click="showInput=comment.id">回复</el-button>
          <div v-for="childComments in comment.childComments">
            <img :src="childComments.user.headphoto" class="c-avatar" v-if="childComments.user.headphoto!==null">
            <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="c-avatar" v-if="childComments.user.headphoto===null">
            <!--<img class="avatar" :src="childComments.user.headphoto" alt="头像">-->
            <span style="vertical-align: top;font-size: small;color: rgba(251,114,153,0.8)">{{childComments.user.name}}</span>
            <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="childComments.user.id===showData.creatBy">帖主</el-tag></span>
            <span style="vertical-align: top;"><el-tag type="success" size="mini" v-if="childComments.user.id===user.id">我</el-tag></span>
            <span style="font-size: 13px">{{childComments.content}}</span>
            <div style="margin-left: 30px">
            </div>
            <br>
          </div>
          <div  v-if="showInput===comment.id">
            <el-input v-model="myComment1" placeholder="发个友善的评论交流一下吧！" style="width: 90%"></el-input><el-button type="primary" @click="sendComment(comment.id,false,comment)">发送</el-button>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.mainuse{
  margin-top: 10px;
  padding-left: 10px;
  column-count: 4;
  column-gap: 0;
  margin-bottom: 150px;
}
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 15px;
}
.avatar{
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 18px;
}
.c-avatar{
  cursor: pointer;
  width: 25px;
  height: 25px;
  border-radius: 18px;
}
</style>
